import router from '@/router'
import nprogress from 'nprogress'
// import 默认导入的文件是js文件，如果不加后缀默认的都是js文件
// 导代码时，读的是路径
import 'nprogress/nprogress.css'
import store from '@/store'

// 白名单：'/login', '/404'
const white_list = ['/login', '/404']

// 前置导航守卫：开启进度条
// 注意点：编写完前置守卫，记得立即加next()放行，不然页面变白色，无法跳转页面无法测试
router.beforeEach(async(to, from, next) => {
  // 开启进度条
  nprogress.start()
  // 1. 获取Vuex中的token (建议：倒着写，先写token，往前推)
  const token = store.getters.token
  console.log(token)
  // 2. 判断token是否存在，如果存在
  if (token) {
    // 2.1 如果用户访问的是登录页，中转到主页
    if (to.path === '/login') {
      // 易错点：如果next('参数')，中转页面时不会执行后置导航守卫，所以需要手动关闭进度条
      // 手动关闭进度条
      nprogress.done()
      next('/')
    } else {
      // 页面每次跳转时都要获取一次登录用户基本信息
      // 所以请求基本信息的地方必须是每次登录用户页面跳转都要经过的地方
      // 获取登录用户基本信息：用户头像，名字，......
      // 注意点：需要先拿到用户基本信息，再跳转到下一页面渲染基本信息
      if (!store.getters.userId) {
        await store.dispatch('user/getUserInfoAction')
      }

      // 2.2 如果用户访问的不是登录页，放行
      next()
    }
  } else {
    // 3. 判断token是否存在，如果不存在
    // 3.1 如果访问的路径在白名单中，则放行
    // if (white_list.indexOf(to.path) > -1) {
    if (white_list.includes(to.path)) {
      next()
    } else {
      // 3.2 用户既不访问白名单，也没有token，不能白嫖，进入登录页
      // 关闭进度条
      nprogress.done()
      next('/login') // 中转到登录页
    }
  }

  // 注意点：编写完前置守卫，记得立即加next()放行，不然页面变白色，无法跳转页面无法测试
  // next()
})

// 后置导航守卫：关闭进度条
router.afterEach(() => {
  // 关闭进度条
  nprogress.done()
})
